<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单</title>
    <!--引入vue、element-ui、axios；注意：vue要在element-ui之前-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script src="/js/axios.helper.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css" rel="stylesheet">
    <style>
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
            /* 设置水平、垂直居中 */
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <!--element官网：Layout 布局，通过基础的 24 分栏，迅速简便地创建布局。-->
            <!--第一行：头部-->
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-link :href="'/index.html'">蜗牛学苑</el-link>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <!--第二行：搜索-->
            <el-row>
                <!--左边: 搜索-->
                <el-col :span="12">
                    <el-form :inline="true" :model="condition" class="demo-form-inline">
                        <el-form-item label="请输入">
                            <el-input v-model="condition.keyword" placeholder="书名/作者/类型"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="queryBook">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <!--右边: 个人中心-->
                <el-col :span="12">
                    <div style="text-align: right">
                            <span v-if="realName == ''">
                                <el-link type="info" :href="'/login.html'">登录</el-link>
                                <el-link type="info">注册</el-link>
                            </span>
                        <span v-else>
                                欢迎你，{{realName}}
                                <el-link type="info" @click="logout">退出系统</el-link>
                            </span>

                        <el-link type="info">个人中心</el-link>
                        <el-link type="info" :href="'/cart.html'">我的购物车</el-link>
                        <el-link type="info" :href="'/order.html'">我的订单</el-link>
                    </div>
                </el-col>
            </el-row>

            <!--第三行：面包屑 导航-->
            <el-row>
                <el-col :span="24">
                    <el-breadcrumb separator="/">
                        <!-- 从后台获取所有类别，v-for 遍历-->
                        <el-breadcrumb-item v-for="type in typeList">
                            <el-link
                                    type="info"
                                    :href="'/index/showBookList?typeId=' + type.id"
                                    style="color:gray;font-weight: normal">{{type.name}}
                            </el-link>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
            </el-row>

            <!--选项卡Tabs-->
            <el-row>
                <el-col :span="24">
                    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                        <el-tab-pane label="全部订单" name="1">
                            <!--此时显示全部订单-->

                        </el-tab-pane>
                        <el-tab-pane label="待付款" name="2">

                            <div v-for="(o,index) in waitPayOrders" :key="index">
                                <!--此处显示所有待付款的订单-->
                                <el-descriptions title="订单信息">
                                    <el-descriptions-item label="下单时间" >{{o.createtime}}</el-descriptions-item>
                                    <el-descriptions-item label="订单编号">{{o.orderNum}}</el-descriptions-item>
                                    <el-descriptions-item label="订单总金额（元）">{{o.totalprice}}</el-descriptions-item>
                                    <el-descriptions-item label="收货人">{{o.receiver}}</el-descriptions-item>
                                    <el-descriptions-item label="订单状态">{{o.orderStatus}}</el-descriptions-item>
                                </el-descriptions>

                                <el-table :data="o.orderItem" style="width: 100%">
                                    <el-table-column prop="bookName" label="书籍名称" width="180"></el-table-column>
                                    <el-table-column label="书籍图片" width="180">
                                        <template slot-scope="scope">
                                            <el-image style="width: 100px; height: 100px" :src="scope.row.bookImg"></el-image>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="bcount" label="数量"> </el-table-column>
                                    <el-table-column prop="sumprice" label="小计"></el-table-column>
                                </el-table>

                                <p>
                                    <el-button type="primary" @click="payOrder(o.id)">去支付</el-button>
                                    <el-button type="info">取消购买</el-button>
                                </p>
                            </div>


                        </el-tab-pane>

                        <el-tab-pane label="待发货" name="3">
                            <!--此处显示所有待发货的订单-->
                        </el-tab-pane>
                        <el-tab-pane label="待收货" name="4"></el-tab-pane>
                        <el-tab-pane label="待评价" name="5"></el-tab-pane>
                        <el-tab-pane label="退货中" name="6"></el-tab-pane>
                        <el-tab-pane label="退款中" name="7"></el-tab-pane>
                        <el-tab-pane label="已取消" name="8"></el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>

        </el-main>
    </el-container>

</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                // 搜索对象
                condition: {
                    keyword: ""
                },
                realName: '',
                // 分类
                typeList: [],
                waitPayOrders:[],
                activeName: '2',
                uniquecode: ''
            }
        },
        methods: {
            // 点击去支付
            payOrder(orderId){
                const id = orderId.toString();
                axios.post(`/order/pay/${id}`,{
                    headers: {
                        "uniquecode": this.uniquecode
                    }
                }).then(resp=>{
                    if (resp.data.code == 200) {
                        this.$message.success("购买成功!");
                        setTimeout(()=>{
                            location.href = '/index.html';
                        },2000)
                    } else {
                        this.$message.success(resp.data.message);
                    }
                })
            },
            queryBook() {

            },
            // 查询图书分类
            queryBookType() {
                axios.get('/booktype').then(resp => {
                    console.log('booktype', resp)
                    this.typeList = resp.data.data;
                })
            },
            getCurrentUser() {
                axios.get('/user/getCurrentUser').then(resp => {
                    if (resp.data.data != null && resp.data.data != '') {
                        this.realName = resp.data.data;
                    } else {
                        this.realName = '';
                    }
                })
            },
            logout() {
                this.$confirm('此操作将要退出系统，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    localStorage.removeItem("token");
                    location.href = "/index.html"
                });
            },
            loadMyOrders(){
                // 查询待支付的订单，后台返回OrderVo
                axios.get('/order/waitPay').then(res=>{
                    console.log("/order/waitPay:{}",res);
                    this.waitPayOrders = res.data.data;
                });
            },
            // 点击选项卡出发的事件（暂不处理）
            handleClick(tab, event) {
                console.log(tab, event);
            }
        },
        created() {
            this.queryBookType();
            this.getCurrentUser();
            this.loadMyOrders();
            this.uniquecode = "UNIQUECODE" + Date.now();
        }
    })
</script>
</html>